<template>
	<el-drawer title="人像来源" :visible.sync="visible" size="480px" append-to-body class="face_detail_drawer">
		<div class="face_info_wrapper">
			<div class="face">
				<img :src="data.fields?.attrAddr || data.defaultImg" alt="" />
				<p>{{ data.name }}</p>
			</div>
			<div class="resource">
				<h2>片段列表</h2>
				<template v-if="nodeListData.length > 0">
					<dl v-for="(item, index) in nodeListData" :key="index">
						<dt>
							<img :src="item.url" :alt="item.text" />
						</dt>
						<dd>
							<span @click="handleRouterTo(item.time)">{{ item.text || data.title }}</span>
						</dd>
						<dd class="time">{{item.time * 1000 | timeFilter}}</dd>
					</dl>
				</template>
				<template v-else>
					<el-empty description="暂无资源"></el-empty>
				</template>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import moment from 'moment';
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default () {
				return {};
			}
		}
	},
	data() {
		return {
			visible: this.value
		};
	},
	filters: {
		timeFilter(input) {
			return moment.utc(input).format('HH:mm:ss');
		}
	},
	computed: {
		nodeListData() {
			let nodeArr = this.data.storyPicture;
			if(!!nodeArr && nodeArr.length > 0) {
				return nodeArr.sort((a, b) => a.time - b.time);
			} else {
				return [];
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		//跳转到资源详情页面
		handleRouterTo(time) {
			let router = this.$router.resolve({ path: '/data/resource/' + this.data.originalId, query: { time } });
			window.open(router.href, '_blank');
		}
	}
};
</script>

<style lang="scss">
.face_detail_drawer {
	.el-drawer {
		top: 56px;
	}

	.el-drawer__header {
		padding: 10px;
		margin: 0;
		border-bottom: solid 1px #eef1f5;

		span {
			font-size: 16px;
			font-weight: bold;
			margin-left: 5px;
		}
	}
}
</style>

<style lang="scss" scoped>
.face_info_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;

	.face {
		display: flex;
		align-items: center;
		padding: 15px;

		img {
			width: 100px;
			height: 100px;
			border: solid 1px #f1f1f1;
			object-fit: cover;
			flex-shrink: 0;
		}

		p {
			flex: 1;
			margin-left: 12px;
		}
	}

	.resource {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		h2 {
			font-size: 16px;
			font-weight: bold;
			padding: 0 15px 15px;
			border-bottom: solid 1px #ebeef5;
			color: #72767b;
		}

		dl {
			display: flex;
			align-items: center;
			padding: 10px;
			border-bottom: solid 1px #ebeef5;
		}

		dt {
			width: 24px;
			height: 24px;
			flex-shrink: 0;
			margin-right: 6px;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		dd {
			flex: 1;
			height: 24px;
			line-height: 24px;
			overflow: hidden;

			&.time {
				flex: none;
				color: #0c61b5;
				margin-left: 10px;
			}

			span {
				display: inline-block;
				max-width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				cursor: pointer;
			}

			span:hover {
				color: #0c61b5;
				text-decoration: underline;
			}
		}
	}
}
</style>